Created:10/06/2019
By: TeamXcel
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!
Below is the general HTML structure of the landing page.
The template layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, portfolio section you can showcase your portfolio with awesome animation, team section is for your team members, testimonial section here you can published your customer reviews, contact section here you can put your contact information & footer that show copyright information.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Personal Portfolio Template">
<meta name="author" content="TeamXcel">
<title>Xavia | Showcase Your Portfolio</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Themify Icons CSS -->
<link rel="stylesheet" href="css/themify-icons.css">
<!-- Elegant Line Icons CSS -->
<link rel="stylesheet" href="css/elegant-line-icons.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Slicknav CSS -->
<link rel="stylesheet" href="css/slicknav.min.css">
<!-- animate CSS -->
<link rel="stylesheet" href="css/animate.min.css">
<!-- OWL-Carousel CSS -->
<link rel="stylesheet" href="css/owl.carousel.css">
<!-- Venobox CSS -->
<link rel="stylesheet" href="css/venobox.css">
<!-- Main CSS -->
<link rel="stylesheet" href="css/main.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body data-spy="scroll" data-target="#navmenu" data-offset="70">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="site-preloader-wrap">
<div class="spinner"></div>
</div><!-- Preloader -->
<header id="header" class="header-section">
<div class="container">
</div>
</header> <!--.header-section -->
<section id="home" class="hero-section d-flex align-items-center">
<div class="container">
</div>
</section><!--.hero-section-->
<section id="about" class="about-section bd-bottom padding">
<div class="container">
</div>
</section><!--/.about-section-->
<section id="services" class="service-section bg-grey bd-bottom padding">
<div class="container">
</div>
</section><!--/.service-section-->
<section class="counter-section padding">
<div class="container">
</div>
</section><!--/.counter-section-->
<section id="portfolio" class="work-section bd-bottom padding">
<div class="container">
</div>
</section><!--/.work-section-->
<section id="reviews" class="testimonial-section bg-grey bd-bottom padding">
<div class="container">
</div>
</section><!--.testimonial-section-->
<section id="contact" class="contact-section padding">
<div class="container">
</div>
</section><!--/.contact-section-->
<section class="widget-section padding">
<div class="container">
</div>
</section><!--/.widget-section-->
<footer class="footer-section">
<div class="container">
</div>
</footer><!-- /.footer-section -->
<a data-scroll href="#header" id="scroll-to-top"><i class="ti-angle-up"></i></a>
<!-- jQuery Lib -->
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<!-- Bootstrap JS -->
<script src="js/vendor/bootstrap.min.js"></script>
<!-- Tether JS -->
<script src="js/vendor/tether.min.js"></script>
<!-- Slicknav JS -->
<script src="js/vendor/jquery.slicknav.min.js"></script>
<!-- OWL-Carousel JS -->
<script src="js/vendor/owl.carousel.min.js"></script>
<!-- Counterup JS -->
<script src="js/vendor/jquery.counterup.min.js"></script>
<!-- Waypoins JS -->
<script src="js/vendor/jquery.waypoints.v2.0.3.min.js"></script>
<!-- Venobox JS -->
<script src="js/vendor/venobox.min.js"></script>
<!-- Image Loaded JS -->
<script src="js/vendor/imagesloaded.pkgd.min.js"></script>
<!-- Isotop JS -->
<script src="js/vendor/jquery.isotope.v3.0.2.js"></script>
<!-- Smooth Scroll JS -->
<script src="js/vendor/smooth-scroll.min.js"></script>
<!-- Wow JS -->
<script src="js/vendor/wow.min.js"></script>
<!-- Contact -->
<script src="js/contact.js"></script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
The site is made of many sections like header, slider, testimonials, services and more...
<header id="header" class="header-section"> <div class="container"> <nav class="navbar"> <a href="#" class="navbar-brand"><img src="img/logo.png" alt="Xavia"></a> <div class="d-flex menu-wrap"> <div id="navmenu" class="mainmenu"> <ul class="nav"> <li ><a data-scroll class="nav-link active" href="#home">Home <span class="sr-only">(current)</span></a></li> <li><a data-scroll class="nav-link" href="#about">About</a></li> <li><a data-scroll class="nav-link" href="#services">Services</a></li> <li><a data-scroll class="nav-link" href="#portfolio">Portfolio</a></li> <li><a data-scroll class="nav-link" href="#reviews">Reviews</a></li> <li><a data-scroll class="nav-link" href="#contact">Contact</a></li> </ul> </div> </div> </nav> </div> </header> <!--.header-section -->
<section id="home" class="hero-section d-flex align-items-center"> <div class="container"> <div class="row hero-wrap"> <div class="col-lg-12"> <div class="hero-content"> <h1>Hey there ! <br>I'm <span>Cameron Smith</span><br>creative designer.</h1> <p>I Create Web & Graphic Design .</p> <a href="#" class="default-btn"> Lets Started</a> </div> </div> </div> </div> </section><!--.hero-section-->
<section id="about" class="about-section bd-bottom padding"> <div class="container"> <div class="row about-wrap d-flex align-items-center"> <div class="col-md-5 xs-padding"> <div class="about-bg"> <img src="img/about.jpg" alt="img"> </div> </div> <div class="col-md-7 xs-padding"> <div class="about-content"> <h2>I'm creative UI/UX designer <br>developer based in new york.</h2> <p>Hi! My name is Cameron Smith. I am a graphic designer, and I'm very passionate and dedicated to my work. With 20 years experience as a professional graphic designer, I have acquired the skills and knowledge necessary to make your project a success.</p> </div> <ul class="skill-items"> <li class="skill-item"> <h5>Photoshop</h5> <div class="progress"> <div class="progress-bar wow slideInLeft" data-wow-delay="0ms" data-wow-duration="2000ms" role="progressbar" style="width: 80%;"> <span>80%</span> </div> </div> </li> <li class="skill-item"> <h5>Indesign</h5> <div class="progress"> <div class="progress-bar wow slideInLeft" data-wow-delay="200ms" data-wow-duration="2000ms" role="progressbar" style="width: 90%;" role="progressbar"> <span>90%</span> </div> </div> </li> <li class="skill-item"> <h5>Web Programing</h5> <div class="progress"> <div class="progress-bar wow slideInLeft" data-wow-delay="300ms" data-wow-duration="2000ms" role="progressbar" style="width: 75%;" role="progressbar"> <span>75%</span> </div> </div> </li> <li class="skill-item"> <h5>Adobe Illustrator</h5> <div class="progress"> <div class="progress-bar wow slideInLeft" data-wow-delay="400ms" data-wow-duration="2000ms" role="progressbar" style="width: 65%;" role="progressbar"> <span>65%</span> </div> </div> </li> </ul> <div class="cv-btn"> <a href="#" class="default-btn"><i class="fa fa-download"></i>Download CV</a> </div> </div> </div> </div> </section><!--/.about-section-->
<section id="services" class="service-section bg-grey bd-bottom padding"> <div class="container"> <div class="section-heading text-center mb-40"> <h2>My Services</h2> </div><!--/.section-heading--> <div class="service-wrap row"> <div class="col-lg-3 col-sm-6 sm-padding"> <div class="service-item text-center"> <i class="icon-camera"></i> <h3><span>Photography</span></h3> <p>This should be used to tell a story and let your users know a little more about your product or service.</p> </div> </div> <div class="col-lg-3 col-sm-6 sm-padding"> <div class="service-item text-center"> <i class="icon-tools"></i> <h3><span>Web Design</span></h3> <p>This should be used to tell a story and let your users know a little more about your product or service.</p> </div> </div> <div class="col-lg-3 col-sm-6 sm-padding"> <div class="service-item text-center"> <i class="icon-laptop"></i> <h3><span>Graphic Design</span></h3> <p>This should be used to tell a story and let your users know a little more about your product or service.</p> </div> </div> <div class="col-lg-3 col-sm-6 sm-padding"> <div class="service-item text-center"> <i class="icon-mobile"></i> <h3><span>Mobile Apps</span></h3> <p>This should be used to tell a story and let your users know a little more about your product or service.</p> </div> </div> </div> </div> </section><!--/.service-section-->
<section class="counter-section padding"> <div class="container"> <div class="counter-wrap row"> <div class="col-lg-3 col-sm-6 sm-padding"> <div class="counter-item text-center"> <i class="icon-documents"></i> <h3 class="counter">449</h3> <h4>Projects Done</h4> </div> </div> <div class="col-lg-3 col-sm-6 sm-padding"> <div class="counter-item text-center"> <i class="icon-happy"></i> <h3 class="counter">599</h3> <h4>Satisfied Clients</h4> </div> </div> <div class="col-lg-3 col-sm-6 sm-padding"> <div class="counter-item text-center"> <i class="icon-wine"></i> <h3 class="counter">449</h3> <h4>Cups Coffee</h4> </div> </div> <div class="col-lg-3 col-sm-6 sm-padding"> <div class="counter-item text-center"> <i class="icon-trophy"></i> <h3 class="counter">449</h3> <h4>Awerd Won</h4> </div> </div> </div> </div> </section><!--/.counter-section-->
<section id="portfolio" class="work-section bd-bottom padding"> <div class="container"> <div class="section-heading text-center mb-40"> <h2>Work Portfolios</h2> </div><!--/.section-heading--> <div class="work-items-wrap"> <div class="work-titles"></div> <ul class="work-filter mb-30"> <li class="active" data-filter="*">All</li> <li data-filter=".branding">Branding</li> <li data-filter=".design">Design</li> <li data-filter=".wordpress">Wordpress</li> <li data-filter=".marketing">Marketing</li> </ul><!-- /.Work filter --> <div class="row work-items"> <div class="col-md-4 col-sm-6 xs-padding single-item design wordpress"> <a href="img/work-1.jpg" class="work-box img-popup" data-title="Design Production" data-category="Branding"> <div class="work-thumb"> <img src="img/work-1.jpg" alt="work"> </div> </a> </div><!-- /work-1 --> <div class="col-md-4 col-sm-6 xs-padding single-item branding marketing"> <a href="img/work-2.jpg" class="work-box img-popup" data-title="New Genaration" data-category="Marketing"> <div class="work-thumb"> <img src="img/work-2.jpg" alt="work"> </div> </a> </div><!-- /work-2 --> <div class="col-md-4 col-sm-6 xs-padding single-item design wordpress"> <a href="img/work-3.jpg" class="work-box img-popup" data-title=" Lignt Books" data-category="Indesign"> <div class="work-thumb"> <img src="img/work-3.jpg" alt="work"> </div> </a> </div><!-- /work-3 --> <div class="col-md-4 col-sm-6 xs-padding single-item marketing design"> <a href="img/work-4.jpg" class="work-box img-popup" data-title=" Art & Design" data-category="Photography"> <div class="work-thumb"> <img src="img/work-4.jpg" alt="work"> </div> </a> </div><!-- /work-4 --> <div class="col-md-4 col-sm-6 xs-padding single-item wordpress marketing"> <a href="img/work-5.jpg" class="work-box img-popup" data-title=" Flat Mockup" data-category="Design"> <div class="work-thumb"> <img src="img/work-5.jpg" alt="work"> </div> </a> </div><!-- /work-5 --> <div class="col-md-4 col-sm-6 xs-padding single-item design branding"> <a href="img/work-6.jpg" class="work-box img-popup" data-title=" White Cards" data-category="Records"> <div class="work-thumb"> <img src="img/work-6.jpg" alt="work"> </div> </a> </div><!-- /work-6 --> <div class="col-md-4 col-sm-6 xs-padding single-item branding wordpress"> <a href="img/work-7.jpg" class="work-box img-popup" data-title=" Creative Arts" data-category="Design"> <div class="work-thumb"> <img src="img/work-7.jpg" alt="work"> </div> </a> </div><!-- /work-7 --> <div class="col-md-4 col-sm-6 xs-padding single-item wordpress marketing"> <a href="img/work-8.jpg" class="work-box img-popup" data-title=" Photography Eyes" data-category="Videos"> <div class="work-thumb"> <img src="img/work-8.jpg" alt="work"> </div> </a> </div><!-- /work-8 --> <div class="col-md-4 col-sm-6 xs-padding single-item design marketing"> <a href="img/work-9.jpg" class="work-box img-popup" data-title=" Red Glasses" data-category="Design"> <div class="work-thumb"> <img src="img/work-9.jpg" alt="work"> </div> </a> </div><!-- /work-8 --> </div> </div> </div> </section><!--/.work-section-->
<section id="reviews" class="testimonial-section bg-grey bd-bottom padding"> <div class="container"> <div class="row"> <div class="col-md-6 d-none d-lg-block d-md-block"> <div class="clients-thumb"> <div class="ct-thumb thumb-1"></div> <div class="ct-thumb thumb-2"></div> <div class="ct-thumb thumb-3"></div> <div class="ct-thumb thumb-4"></div> <div class="ct-thumb thumb-5"></div> </div> </div> <div class="col-md-6"> <div class="section-heading"> <h2>Clients Reviews</h2> </div><!--/.section-heading--> <div id="testimonial-carousel" class="testimonial-carousel owl-carousel"> <div class="testi-item"> <p>Having a home based business is a wonderful asset to your life. The problem still stands, when it comes timeadvertise your business for a cheap cost. I know you have looked for to answer everywhere.</p> <div class="testi-thumb"> <img src="img/testi-1.jpg" alt="img"><h3>Angelina Rose <span>Designer</span></h3> </div> </div> <div class="testi-item"> <p>Having a home based business is a wonderful asset to your life. The problem still stands, when it comes timeadvertise your business for a cheap cost. I know you have looked for to answer everywhere.</p> <div class="testi-thumb"> <img src="img/testi-2.jpg" alt="img"><h3>Josef Martin <span>Developer</span></h3> </div> </div> <div class="testi-item"> <p>Having a home based business is a wonderful asset to your life. The problem still stands, when it comes timeadvertise your business for a cheap cost. I know you have looked for to answer everywhere.</p> <div class="testi-thumb"> <img src="img/testi-3.jpg" alt="img"><h3>Melania Trump <span>Marketer</span></h3> </div> </div> </div> </div> </div> </div> </section><!--.testimonial-section-->
<section id="contact" class="contact-section padding"> <div class="container"> <div class="contact-wrapper d-flex align-items-center row"> <div class="col-lg-5 col-md-6 sm-padding"> <div class="contact-info"> <div class="section-heading mb-20"> <h2>Get In Touch</h2> </div><!--/.section-heading--> <p>Out believe has request not how comfort evident. <br> Up delight cousins we feeling minutes. Genius has looked <br>end piqued spring.</p> </div> </div> <div class="col-lg-7 col-md-6 sm-padding"> <div class="contact-form"> <form action="contact.php" method="post" id="ajax_form" class="form-horizontal"> <div class="form-group colum-row row"> <div class="col-sm-6"> <input type="text" id="name" name="name" class="form-control" placeholder="Name" required> </div> <div class="col-sm-6"> <input type="email" id="email" name="email" class="form-control" placeholder="Email" required> </div> </div> <div class="form-group row"> <div class="col-md-12"> <textarea id="message" name="message" cols="30" rows="5" class="form-control message" placeholder="Message" required></textarea> </div> </div> <div class="form-group row"> <div class="col-md-12"> <button id="submit" class="default-btn" type="submit">Send Message</button> </div> </div> <div id="form-messages" class="alert" role="alert"></div> </form> </div> </div> </div> </div> </section><!--/.contact-section-->
<section class="widget-section padding"> <div class="container"> <div class="widget-content text-center"> <h2>Let's get to work <span>!</span></h2> <a class="mb-15" href="#">Info@yourmail.com</a> <a href="#">9123456789</a> </div> </div> </section><!--/.widget-section-->
<footer class="footer-section"> <div class="container"> <div class="footer-wrap row"> <div class="col-md-6"> <ul class="footer-social"> <li><a href="#">Facebook</a></li> <li><a href="#">Behance</a></li> <li><a href="#">Dribbble</a></li> </ul> </div> <div class="col-md-6"> <div class="copyright"> <p>© 2019 Xavia Powerd By TeamXcel</p> </div> </div> </div> </div> </footer><!-- /.footer-section -->
These are the css files:
This theme use these Javascript files:
smooth-scroll.min.js
venobox.min.js
bootstrap.min.js
jquery-1.12.4.min.js
imagesloaded.pkgd.min.js
main.js
You can edit the contact.js files. for setting contact form
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
TeamXcel